<template>
        <view class="app">
        <view class="main">
          <h2>乳研智汇</h2>
        </view>
        <view class="top"><h3>创建您的账户</h3></view>
        <view class="msgdiv" :class="{'msg':error,'msg1':came}">
             <span class="mesg" :class="{'achieve':ok}">{{texts}}</span>
        </view>
<form id="assignform">
            <view class="user">
           <label for="username" class="t">用户名</label>
          <input type="text" id="username" class="userinput" v-model="username"
         :class="{'userinputfocus':isfocus}"
          @focus="isfocus=true"
          @blur="isfocus=false">
        </view>
        <view class="user">
             <label for="password" class="t">密码</label>
             <input type="password" id="password" class="userinput" v-model="password"
             :class="{'userinputfocus':isfocus1}"
             @focus="isfocus1=true"
             @blur="isfocus1=false">
        </view>
        <view class="user">
               <label for="passwordagain" class="t">再次输入密码</label>
               <input type="password" id="passwordagain" class="userinput" v-model="passwordagain"
               :class="{'userinputfocus':isfocus2}"
               @focus="isfocus2=true"
               @blur="isfocus2=false">
        </view>
 </form>
        <view class="btn">
        <button class="button" @click="sub" :disabled="!isagree" :class="{'disabled':!isagree}">注册账户</button>
		<label class="radio">
		  <view class="reading">
		       <u-popup :show="showpop" mode="center" >
		         <view  class="popup">
		         <text class="cont">提供真实、准确的注册信息，妥善保管账号密码。禁止转借账号，因账号泄露导致的损失由您承担。尊重平台及他人知识产权，不得擅自传播平台内容
				 您注册使用本平台服务，即视为同意本协议。平台有权修改协议，修改后继续使用视为接受。</text>
		         <u-button @click="onagree" :disabled="isButtonDisabled">{{text}}</u-button>
		         </view>
		       </u-popup>
		       <checkbox @click="open" :checked="isagree"/>
		       <text>请先阅读并同意协议</text>
		       </view>
		 </label>
        </view>
        <view class="forget">
        <p>已有账户？</p><navigator url="/pages/login/login" class="link">点我登录</navigator>
        </view>
        </view>
</template>
<script>
export default {
data() {
return {
	showpop: false,
	isButtonDisabled: true,
	isagree: false,
error: false,
came: false,
ok: false,
username: '',
password: '',
passwordagain: '',
texts: '',
text:'',
timer: null,
timer1: null,
timer2: null,
timer3:null,
isfocus: false,
isfocus1: false,
isfocus2: false
};
},
methods: {
	updatetext(){
			this.text=`未阅读(${this.count}s)`
	},
	open(){
			this.count=5
		    this.show=!this.show
			if(this.show){
			this.showpop=true
			this.isButtonDisabled=true
		     this.updatetext()
			this.timer3=setInterval(()=>{
			this.count--
			this.updatetext()
			if(this.count<=0){
					this.isButtonDisabled=false
					this.text='已阅读'
					clearInterval(this.timer)
				}
				},1000)
				}
				else{
					this.isagree=false
				}
			},	
				onagree() {
					console.log();
				this.showpop = false
				this.isagree = true
				clearInterval(this.timer3)
				},
	clean(){
	this.error = true
	this.came = false
	this.ok = false
	this.timer = setTimeout(() => {
	this.texts = ''
	this.error = false
	}, 5000)	
	},
 async sub() {
clearTimeout(this.timer)
clearTimeout(this.timer1)
clearTimeout(this.timer2)

  if (!this.username.trim() || !this.password) {
  this.texts = '用户名或密码不能为空'
  this.clean()
  return
}

if (this.password.length < 6) {
this.texts= '密码长度不能少于6位'
this.clean()
return
}

   if (this.password !== this.passwordagain) {
    this.texts = '两次密码不一致'
    this.error = true
    this.came = false
    this.ok = false
    this.timer1 = setTimeout(() => {
    this.texts = ''
    this.error = false
    }, 5000)
    return
}
	if (!this.isagree) {
			uni.showToast({
			title: '请先勾选条款',
			icon: 'none',
			mask: true,
			position: 'center'
			})
			return
			}
try {
// 显示加载提示
    uni.showLoading({ title: '注册中...' })
// 发送注册请求
     const response= await uni.request({
      url: '/api/register/web',
      method: 'POST',
      data: {
      username: this.username.trim(),
      password: this.password
      },
	
      })
// 处理注册结果
   if (response[1].statusCode === 200) {
// 保存用户信息
const t=response[1]
console.log(t.header);
  uni.setStorageSync('token',t.header['token'])
				await uni.setStorage({
					key:'username',
					data:this.username.trim()
				})
				await uni.setStorage({
					key:'id',
					data:t.header['userInformation']
				})
 console.log(this.username);
this.$store.commit('NAME',this.username)
   // 注册成功提示
    this.texts = '注册成功'
    this.ok = true
    this.came = true
    this.error = false
// 跳转首页
   this.timer2 = setTimeout(() => {
   uni.reLaunch({ url: '/pages/index/index' })
   }, 3000)
} 
else {
 this.texts = '注册失败',
     this.error = true,
     this.came = false,
     this.ok = false
}
}catch (err) {
     console.log(err)
     this.texts = '注册失败'
     this.error = true
     this.came = false
     this.ok = false
     } finally {
     // 隐藏加载提示
     uni.hideLoading()
     }
  }
},
// 页面销毁时清除定时器
   beforeUnmount() {
    clearTimeout(this.timer)
    clearTimeout(this.timer1)
    clearTimeout(this.timer2)
    }
}
</script>
<style lang="scss" scoped>
	.reading {
	display: inline-block;
	}
	.radio {
	margin-top: 2%;
	margin-bottom: 2%;
	}
.app{
width: 70%;
margin: calc(var(--status-bar-height) + 100rpx) auto 0 auto;
padding-top: 10rpx;
background-color: white;
display: flex;
flex-direction: column;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}
.top{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 4%;
margin-bottom: 4%;
}
.main{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h2{
color: #409EFF;
font-size: 48rpx;
font-weight: 600;
}
.msgdiv{
width: 100%;
height: 80rpx;
border-top: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.mesg{
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: red;
}
.achieve{
color:black;
}
.msg{
background-color: rgb(252, 204, 204);
border-radius: 8rpx;
}
.user{
padding-top:1%;
height: 100%;
}
.t{
display: block;
margin-bottom:1%;
padding-left:5%
}
.userinput{
width: 90%;
margin-left: 5%;
height: 75rpx;
box-sizing: border-box;
outline: none;
border: 1rpx solid #eee;
padding-left: 8rpx;
border-radius: 8rpx;
}
.userinputfocus{
border: 1rpx solid #409EFF !important;
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
}
.btn{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
flex-direction: column;
}
.button {
width: 70%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 30rpx;
border-radius: 4rpx;
font-weight: 500;
box-sizing: border-box;
border: none;
color: white;
line-height: 50rpx;
background-color: #409EFF;
}
.button.disabled {
background-color: #c9e7ff;
cursor: not-allowed;
}
.button:not(.disabled):hover {
background-color: #3a8ee6;
}
.button:hover{
background-color: #3a8ee6;
}
.forget{
width: 100%;
margin-top:4%;
border-top:1rpx solid #eee;
display: flex;
justify-content: center;
align-items: center;
padding-top: 2%;
margin-bottom: 3%;
}
.link{
color:#3a8ee6
}
.msg1{
background-color: rgba(209, 247, 220, 0.664);
border-radius: 8rpx;
}
.popup{
	width: 300rpx;
}
.cont{
	padding: 0 10rpx 0 10rpx;
}
@media (max-width:767rpx) {
.app {
width: 80%;
 padding: 30rpx;
    margin-top: calc(var(--status-bar-height) + 30rpx);
	  
	}
	h2 {
	  font-size: 42rpx;
	}
	
	h3 {
	  font-size: 32rpx;
	margin-bottom: 20rpx;
	margin-top: 10rpx;
	padding-top: 0;
	padding-bottom: 0;
	}
	
}
@media (max-width:360rpx){
	.button{
		font-size: 25rpx;
	}
	h2{
		font-size: 40rpx;
		font-weight: 500;
	}
	h3{
		font-size:30rpx ;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app {
    width: 70%;
    max-width: 600px;
  }
  .popup{
	  width: 400rpx;
  }
  .cont{
	  padding: 0 20rpx 0 20rpx;
  }
  .button {
    height: 60rpx;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
}
@media (min-width: 1024px) {
  .app {
    width: 40%;
    max-width: 500px;
  }
  .popup{
	  width: 420rpx;
  }
  .cont{
  	  padding: 0 20rpx 0 20rpx;
  }
  .userinput {
    height: 80rpx;
  font-size: 28rpx;
  }
}
</style>